<template>
  <div class="container">
    <div>
      <div>
        <span @click="$router.back(-1)"
              class="back">{{$t('page.back')}}{{$t('page.list')}}</span> > {{$route.query.name}}（{{$route.query.time}}）
      </div>
    </div>
    <div class="container-body"
         v-loading="loading">

      <template>
        <div class="title-space">
          <span>{{$t('page.ODvalue')}}：</span>
        </div>

        <div class="overflow">
          <table id="table-1"
                 width="100%"
                 v-for="(listItem,listIndex) in tableData">

            <tr v-for="(table,key,index) in listItem"
                :key="index">
              <td class="color-000">{{key!=='time'?key:$t('page.hole')}}</td>
              <td>
                <span v-if="key!=='time'">
                  {{beforeLable[index-1]}}{{unit}}
                </span>
                <span class="color-000"
                      v-else>
                  {{$t('page.label')}}
                </span>
              </td>
              <td v-for="iTable in table">
                <span v-if="key!=='time'">{{iTable}}</span>
                <span class="color-000"
                      v-else>{{iTable + 's'}}</span>
              </td>
            </tr>
          </table>
        </div>

        <div class="space text-center">
          <linePointDiagram
            :value="originalData"
          ></linePointDiagram>

          <h3 style="margin-top: 20px;">{{ holeSort }}</h3>
          <Histogram
            v-show="graphicalList && graphicalList.includes(2)"
            :data="hisogramList"
            :resultValue="resultValue"
          ></Histogram>
        </div>

        <!-- <div class="title-space">
          <span>计算结果：</span>
        </div> -->

        <!-- <div class="title-space">
          <span>{{$t('page.molecular')}}（Da）：</span>
          {{mole}}
        </div> -->

        <div class="space">
          <div>
            <table id="table-1"
                   width="100%">

              <template v-for="(resValue,resIndex) in paramResult" >
                <tr :key="resIndex">
                  <td v-for="(v,k,i) in resValue" :key="i">{{k}}</td>
                </tr>
                <tr :key="resIndex + 99">
                  <td v-for="(v,k,i) in resValue" :key="i">{{v}}</td>
                </tr>
              </template>
            </table>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import waveChart from '@/components/WaveChart'
import { fetchHistoryDetail } from '@/api/table'
import Histogram from '../components/histogram.vue'
import linePointDiagram from '@/commonPage/linePointDiagram'
import { formatData } from '@/commonPage/linePointDiagram/formatData'

export default {
  data() {
    return {
      graphicalList: ['1', '2'],
      loading: true,
      stepTwoList: [],
      originalData: {},
      originalDataRate: [],
      lightValue: [],
      lightRate: [],
      allLightRateCharts: [],
      allStepOneCharts: [],
      waveLength: [],
      waveLengthDiff: {},
      waveCharts: [],
      exlName: '',
      mole: '',
      tableTop: [],
      imgList: '',
      parameter: [],
      waveName: [],
      virusLabel: [],
      beforeLable: [],
      baseStepOne: [],
      doDownload: false,
      paramResult: [],
      unit: '',
      hisogramList: {}, // 柱状图数据
      tableData: [], 
      resultValue: {},
      holeSort: ''
    }
  },
  components: {
    waveChart,
    Histogram,
    linePointDiagram,
  },
  mounted() {
    this.getHistoryDetail()
  },
  methods: {
    async getHistoryDetail() {
      const res = await fetchHistoryDetail({
        id: this.$route.query.id,
      })
      this.loading = false
      this.mole = res.data[0].mole
      const data = JSON.parse(res.data[0].resultData)
      this.beforeLable = JSON.parse(res.data[0].crpValue)
      this.unit = data.unit

      this.graphicalList = data.imageSwitcher
      // 表格需要的数据
      this.tableData = data.originalData
      this.originalData = {
        ...formatData(data.originalData[0]),
      }

      // 柱状图lenged
      this.resultValue = data.resultValue
      // this.waveName = data.hole
      this.paramResult = data.paramResult
      this.hisogramList = data.histogram
      this.holeSort = data.holeSort

      // this.drawChart()
    },
    downloadExl() {
      const href = `${process.env.BASE_URL}receive/download/excel/1/${this.exlName}`
      window.open(href, '_blank')
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}
.back {
  color: #028cdf;
  cursor: pointer;
}
table {
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 20px;
}
.img-list {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
.img-item {
  width: 500px;
}

#table-2 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
}
#table-2 tr {
  border: 1px solid #000 !important;
}

#table-2 td:first-child {
  border-left: 1px solid #000;
}

/* Padding and font style */
#table-2 td,
#table-2 th {
  padding: 10px 15px;
  font-size: 12px;
  font-family: Verdana;
  border-right-width: 1px;
  border-right-style: solid;
}

.data-item {
  display: block;
}

@media screen and (min-width: 1000px) {
  .data-item {
    display: inline-block;
    margin-right: 20px;
  }
}
</style>